import { defineComponent, ref, watch } from 'vue'
import * as echarts from 'echarts'
// 声明类型
const PropsType = {
  cdata: {
    type: Object,
    require: true
  }
} as const

// 定义主体
export default defineComponent({
  props: PropsType,
  setup(props) {
    // 定义 ref
    const chartRef = ref()

    // 配置项
    let options = {}

    watch(
      () => props.cdata,
      (val: any) => {
        options = {
          tooltip: {
            show: true,
            trigger: 'item',
            formatter: (data) => {
              // console.log(data.seriesIndex);
              let tip = '<h5 class="echarts-tip-h5">' + data.seriesName + '</h5>';
              let tmpData = [];
              if (data.seriesIndex === 0) {
                tmpData = val.data1;
              } else if (data.seriesIndex === 1) {
                tmpData = val.data2;
              }
              data.value.forEach((item, index) => {
                tip += '<div>';
                tip += '<div>' + val.list[index].name + ': ' + tmpData[0][index] + '次</div>'
                tip += '</div>';
              });
              return tip;
            },
          },
          legend: {
            show: true,
            icon: 'circle',
            left: '2%',
            top: '5%',
            orient: 'horizontal',
            textStyle: {
              fontSize: 12,
              color: '#fff',
            },
            data: ['本月', '上月'],
          },
          radar: {
            name: {
              textStyle: {
                color: '#fff',
                fontSize: 16,
              },
              rich: {
                a: {
                  fontSize: 16,
                  color: '#FFFFFF',
                  padding: [0, 0, 8, 0],
                },
                b: {
                  fontSize: 18,
                  color: '#ACD3FF',
                },
              },
              formatter: (a) => {
                return `{a| ${a}}`;
              },
            },
            center: ['50%', '60%'],
            radius: '70%',
            startAngle: 90,
            splitNumber: 4,
            shape: 'circle',
            splitArea: {
              areaStyle: {
                color: ['rgba(50, 72, 130, 0.7)', 'rgba(50, 72, 130, 0.5)', 'rgba(50, 72, 130, 0.6)'],
              },
            },
            axisLabel: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: 'rgba(50, 72, 130, 0.4)',
              },
            },
            indicator: val.list,
          },
          series: [
            {
              name: '本月',
              type: 'radar',
              symbol: 'circle',
              symbolSize: 3,
              areaStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(
                    0,
                    1,
                    0,
                    0,
                    [
                      {
                        offset: 0,
                        color: 'rgba(232, 235, 20, 1)',
                      },
                      {
                        offset: 1,
                        color: 'rgba(240, 151, 34, 1)',
                      },
                    ],
                    false
                  ),
                },
              },
              itemStyle: {
                color: 'rgba(245, 166, 35, 1)',
                borderColor: 'rgba(235, 171, 86, 0.7)',
                borderWidth: 10,
              },
              data: val.data1,
            },
            {
              name: '上月',
              type: 'radar',
              symbol: 'circle',
              symbolSize: 3,
              itemStyle: {
                normal: {
                  color: 'rgba(19, 173, 255, 1)',
                  borderColor: 'rgba(19, 173, 255, 0.4)',
                  borderWidth: 10,
                },
              },
              areaStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(
                    0,
                    1,
                    0,
                    0,
                    [
                      {
                        offset: 0,
                        color: 'rgba(82, 247, 242, 1)',
                      },
                      {
                        offset: 1,
                        color: 'rgba(65, 105, 213, 1)',
                      },
                    ],
                    false
                  ),
                },
              },
              data: val.data2,
            },
          ],
        }
        // 手动触发更新
        if (chartRef.value) {
          // 通过初始化参数打入数据
          chartRef.value.initChart(options)
        }
      },
      {
        immediate: true,
        deep: true
      }
    )

    return () => {
      const height = "240px"
      const width = "420px"

      return <div>
        <echart ref={chartRef} options={options} height={height} width={width} />
      </div>
    }
  }
})

